
/**背景颜色**/
.bg{
	background-color: $main;
	color: $mainInverse;
}
.gradualBg{
	background-image: $mainGradual;
	color: $mainGradualInverse ;
}
.activeBg{
	background-color: $activeColor;
	color: $mainInverse;
}
.grayBg{
	background-color: #f7f7f7;
	color: #30302f;
}
.whiteBg{
	background-color: #fff;
	color: #000;
}
.blackBg{
	background-color: #000;
	color: #fff;
}
.pinkBg{
	background-color: $pink;
	color: #fff;
}
.orangeBg{
	background-color: $orange;
	color: #fff;
}
.redBg{
	background-color: $red;
	color: #fff;
}
.yellowBg{
	background-color: $yellow;
	color: #000;
}
.greenBg{
	background-color: $green;
	color: #fff;
}
.brownBg{
	background-color: $brown;
	color: #fff;
}
.blueBg{
	background-color: $blue;
	color: #fff;
}
.purpleBg{
	background-color: $purple;
	color: #fff;
}
.greyBg{
	background-color: $grey;
	color: #fff;
}

/* 文字颜色 */
.main{
	color: $main;
}
.activeColor{
	color: $activeColor;
}
.green{
	color: $green;
}
.red{
	color: $red;
}
.yellow{
	color: $yellow;
}
.black{
	color: $black;
}
.white{
	color: $white;
}
.gray{
	color: $gray;
}
.grey{
	color: $grey;
}
.orange{
	color: $orange;
}
.brown{
	color: $brown;
}
.blue{
	color: $blue;
}
.purple{
	color: $purple;
}
.pink{
	color: $pink;
}

/* 宽度 高度 */
$w:0 ;
@while $w <= 200 {
	@if $w <= 100 {
		@if $w == 100 {
			.ww{
				width: 100vw;
			}
			.hh{
				height: 100vh;
			}
		}
	}
	.w#{$w}{
		width: $w*2rpx;
	}
	.h#{$w}{
		height: $w*2rpx;
	}
	@if $w < 10 {
		$w : $w + 1 ;
	} @else{
		$w : $w + 5 ;
	}
}



/* 字号 */
@for $fz from 12 through 50 {
	.fz#{$fz}{
		font-size: $fz*2rpx ;
	}
}

/* 行间距 */
@for $lh from 1 through 11 {
	.lh#{$lh}{
		line-height: 1 + ($lh - 1) * 0.1 ;
	}
}

@for $lh from 12 through 50 {
	.lh#{$lh}{
		line-height: $lh*2rpx ;
	}
}



/* 边距 - 覆盖顺序是小的尺寸覆盖大的尺寸 少的方向覆盖多的方向 */
$s : 200 ;
@while $s >= 0 {
	.pd#{$s}{
		padding: $s*2rpx;
	}
	.m#{$s}{
		margin: $s*2rpx;
	}
	@if $s == 15 {
		.pd{
			padding: 30rpx;
		}
		.m{
			margin: 30rpx;
		}
	}
	@if $s <= 10 {
		$s : $s - 1 ;
	} @else{
		$s : $s - 5 ;
	}
}

$s : 200 ;
@while $s >= 0 {
	.ptb#{$s}{
		padding-top: $s*2rpx;
		padding-bottom: $s*2rpx;
	}
	.plr#{$s}{
		padding-left: $s*2rpx;
		padding-right: $s*2rpx;
	}
	.mtb#{$s}{
		margin-top: $s*2rpx;
		margin-bottom: $s*2rpx;
	}
	.mlr#{$s}{
		margin-left: $s*2rpx;
		margin-right: $s*2rpx;
	}
	@if $s == 15 {
		.ptb{
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}
		.plr{
			padding-left: 30rpx;
			padding-right: 30rpx;
		}
		
		.mlr{
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
		.mtb{
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	@if $s <= 10 {
		$s : $s - 1 ;
	} @else{
		$s : $s - 5 ;
	}
}

$s : 200 ;
@while $s >= 0 {
	.pl#{$s}{
		padding-left: $s*2rpx;
	}
	.pr#{$s}{
		padding-right: $s*2rpx;
	}
	.pt#{$s}{
		padding-top: $s*2rpx;
	}
	.pb#{$s}{
		padding-bottom: $s*2rpx;
	}
	.ml#{$s}{
		margin-left: $s*2rpx;
	}
	.mr#{$s}{
		margin-right: $s*2rpx;
	}
	.mt#{$s}{
		margin-top: $s*2rpx;
	}
	.mb#{$s}{
		margin-bottom: $s*2rpx;
	}
	@if $s == 15 {
		.pt{
			padding-top: 30rpx;
		}
		.pb{
			padding-bottom: 30rpx;
		}
		.pl{
			padding-left: 30rpx;
		}
		.pr{
			padding-right: 30rpx;
		}
		.mt{
			margin-top: 30rpx;
		}
		.mr{
			margin-right: 30rpx;
		}
		.ml{
			margin-left: 30rpx;
		}
		.mb{
			margin-bottom: 30rpx;
		}
	}
	@if $s <= 10 {
		$s : $s - 1 ;
	} @else{
		$s : $s - 5 ;
	}
}


/* 文字溢出隐藏 */
.clip,.cut{
	text-overflow: ellipsis ;
	lines : 1 ;
	@for $i from 2 through 10{
		&.c#{$i}{
			lines : $i ;
		}
	}
}

.cut{
	text-overflow: clip;
}

.flex,.grid{
	display: flex;
	flex-direction: row;
	flex-wrap : nowrap ;
	align-items:center;
	justify-content: space-between;
	&.vertical{
		flex-direction: column;
	}
	&.start,&.lt{
		justify-content: flex-start;
	}
	&.end,&.rt{
		justify-content: flex-end;
	}
	&.center,&.ct{
		justify-content: center;
	}
	&.around,&.ar{
		justify-content: space-around;
	}
	&.between,&.sb{
		justify-content: space-between;
	}
	&.t{
		align-items:flex-start;
	}
	&.b{
		align-items:flex-end;
	}
	&.cv{ //垂直方向铺满
		align-items: stretch;
	}
	&.av{
		>.item{
			flex:1;
		}
	}
	>.cover{
		flex:1;
	}
}

.grid{
	flex-wrap: wrap;
	&.g2{
		>.item{
			width: 375rpx;
		}
	}
}


.w100p{
	flex:1;
}


/* 定位布局 */
.father{
	position: relative;
}

.abs,.fixed{
	position: absolute;
	z-index: 1;
	&.fill{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	&.top{
		top: 0;
		left: 0;
		right: 0;
	}
	&.bottom{
		left: 0;
		right: 0;
		bottom: 0;
	}
	&.left{
		top: 0;
		left: 0;
		bottom: 0;
	}
	&.right{
		top: 0;
		right: 0;
		bottom: 0;
	}
	&.center{
		left: 50%;
		top: 50%;
		transform: translate3d(-50%,-50%,0);
	}
	&.topCenter{
		left: 50%;
		top: 0;
		transform: translate3d(-50%,0,0);
	}
	&.bottomCenter{
		left: 50%;
		bottom: 0;
		transform: translate3d(-50%,0,0);
	}
	&.leftCenter{
		top: 50%;
		left: 0;
		transform: translate3d(0,-50%,0);
	}
	&.rightCenter{
		top: 50%;
		right: 0;
		transform: translate3d(0,-50%,0);
	}
}
@for $i from 0 through 20 {
	.z#{$i}{
		z-index: $i ;
	}
}

.fixed{
	position: fixed;
}

/* 按钮样式类 */
 .btn{
	align-items: center;
	justify-content: center;
 	padding: 12rpx 24rpx;
 	border-radius: 8rpx;
 	transition:opacity 0.4s;
	transform: translateZ(0);
	&.btn-block{
	  margin: 0;
	  padding: 20rpx 24rpx;
	  flex: 1;
	}
	&.btn-text{
		padding: 0 10rpx;
	}
 	&:hover{
 		opacity: 0.8;
 	}
 	&.disabled{
 		transform: scale(1);
 		opacity: 0.4;
 	}
 }
 
 
 /* 圆角 */
 .radius,.rds{
 	border-radius: 100%;
 }
 
 $r:0;
 @while $r <= 50{
 	.rds#{$r},&.radius#{$r}{
 		border-radius:$r*2rpx;
 	}
 	$r : $r + 1;
 }
 
 .rdsTl{
 	border-top-left-radius:100%;
 }
 .rdsTr{
 	border-top-right-radius: 100%;
 }
 .rdsBl{
 	border-bottom-left-radius: 100%;
 }
 .rdsBr{
 	border-bottom-right-radius: 100%;
 }
 .rdsL{
 	border-top-left-radius:100%;
 	border-bottom-left-radius: 100%;
 }
 .rdsR{
 	border-top-right-radius: 100%;
 	border-bottom-right-radius: 100%;
 }
 .rdsT{
 	border-top-left-radius:100%;
 	border-top-right-radius: 100%;
 }
 .rdsB{
 	border-bottom-right-radius: 100%;
 	border-bottom-left-radius: 100%;
 }
 
 $r:0;
 @while $r <= 50{
 	.rdsTl#{$r}{
 		border-top-left-radius: $r*2rpx;
 	}
 	.rdsTr#{$r}{
 		border-top-right-radius: $r*2rpx;
 	}
 	.rdsBl#{$r}{
 		border-bottom-left-radius: $r*2rpx;
 	}
 	.rdsBr#{$r}{
 		border-bottom-right-radius: $r*2rpx;
 	}
 	.rdsL#{$r}{
 		border-top-left-radius:$r*2rpx;
 		border-bottom-left-radius: $r*2rpx;
 	}
 	.rdsR#{$r}{
 		border-top-right-radius: $r*2rpx;
 		border-bottom-right-radius: $r*2rpx;
 	}
 	.rdsT#{$r}{
 		border-top-left-radius:$r*2rpx;
 		border-top-right-radius: $r*2rpx;
 	}
 	.rdsB#{$r}{
 		border-bottom-right-radius: $r*2rpx;
 		border-bottom-left-radius: $r*2rpx;
 	}
 	$r : $r + 1;
 }
 
 
 
/* 正方形&长方形 */
 
 $p : 200 ;
 @while $p > 0 {
 	.square#{$p}{
 		padding-top: $p*1%;
		position: relative;
		>.item{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
 	}
 	@if $p == 100 {
 		.square{
 			padding-top: 100%;
			position: relative;
			>.item{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			} 
 		}
 	}
 	$p : $p - 5 ;
 }
 
 /* 阴影 */
 .shadow{
 	box-shadow: 0px 2px 9px -1px rgba(0, 0, 0, 0.1);
 }
 
 
 /* 遮罩层 */
 .wrapper-top,.wt{
 	background-image: linear-gradient(rgba(0,0,0,0.3) , rgba(0,0,0,0.02));
 }
 
 .wrapper-bottom,.wb{
 	background-image: linear-gradient( rgba(0,0,0,0.02) , rgba(0,0,0,0.3) );
 }
 
 
 
 /* 透明度 */
 @for $op from 0 through 10 {
 	.op#{$op}{
 		opacity: $op * 0.1;
 	}
 	.wp#{$op}{
 		background-color: rgba(#000,$op*0.1);
 	}
 	@if $op == 5 {
 		.wp{
 			background-color: rgba(#000,0.5);
 		}
 	}
}

 /* 位置 */
 .text-center,.tc{
 	text-align: center;
 }
 .text-left,.tl{
 	text-align: left;
 }
 .text-right,.tr{
 	text-align: right;
 }
 .text-bold,.bold{
 	font-weight: bold;
 }
 .text-normal,.normal{
 	font-weight: normal;
 }
 .hide{
	 transform: translateY(-200%);
	 opacity: 0;
 }
 
 
 /* 边线(实线、虚线) */
 .bd{
 	border: 1px solid $borderColor;
 	&.dashed{
 		border-style: dashed;
 	}
 }
 .bt{
 	border-top:1px solid $borderColor;
 	&.dashed{
 		border-top-style: dashed;
 	}
 }
 .bb{
 	border-bottom:1px solid $borderColor;
 	&.dashed{
 		border-bottom-style: dashed;
 	}
 }
 .bl{
 	border-left:1px solid $borderColor;
 	&.dashed{
 		border-left-style: dashed;
 	}
 }
 .br{
 	border-right: 1px solid $borderColor;
 	&.dashed{
 		border-right-style: dashed;
 	}
 }
 
 $b:2;
 @while $b <= 10 {
 	.bd#{$b}{
 		border: #{$b}px solid $borderColor;
 		&.dashed{
 			border-style: dashed;
 		}
 	}
 	.bt#{$b}{
 		border-top:#{$b}px solid $borderColor;
 		&.dashed{
 			border-top-style: dashed;
 		}
 	}
 	.bb#{$b}{
 		border-bottom:#{$b}px solid $borderColor;
 		&.dashed{
 			border-bottom-style: dashed;
 		}
 	}
 	.bl#{$b}{
 		border-left:#{$b}px solid $borderColor;
 		&.dashed{
 			border-left-style: dashed;
 		}
 	}
 	.br#{$b}{
 		border-right: #{$b}px solid $borderColor;
 		&.dashed{
 			border-right-style: dashed;
 		}
 	}
 	$b : $b + 1 ;
 }
 
 /* 边线颜色 */
 .mainBd{
 	border-color: $main;
 }
 .greenBd{
 	border-color:  $green;
 }
 .redBd{
 	border-color: $red;
 }
 .yellowBd{
 	border-color:$yellow ;
 }
 .blackBd{
 	border-color: $black;
 }
 .whiteBd{
 	border-color:$white ;
 }
 .grayBd{
 	border-color:$gray;
 }
 .greyBd{
 	border-color:$grey;
 }
 .orangeBd{
 	border-color:$orange;
 }
 .brownBd{
 	border-color:$brown;
 }

@for $scale from 1 through 20 {
	.scale#{$scale}{
		transform: scale(0.1 * $scale );
	}
}

$deg:-180 ;
@while $deg <= 180 {
	.rotate#{$deg}{
		transform: rotate($deg * 1deg);
	}
	$deg : $deg + 15 ;
}